<!--商品列表-->

<template>
    <ul>
    </ul>
    <li v-for="product in productStore.allProducts" :key="product.id">名称：{{product.title}} - 价格：{{product.price}} - 库存：{{product.inventory}}&emsp;
        <button @click="addProductToCart(product)" :disabled="product.inventory<1">添加到购物车</button></li>
</template>

<script setup lang="ts">
    import {Product} from '../api'
    import {useProductStore} from '../store/product'
    import {useCartStore} from '../store/cart'
    const productStore = useProductStore()
    const cartStore = useCartStore()
    // 获取所有商品
    productStore.getAllProducts()

    // 添加商品到购物车
    const addProductToCart = (product:Product) => {
        cartStore.addProductToCart(product)
    }
</script>

<style scoped lang="less">

</style>
